<template>
  <div id="app">
    <el-button type="primary" @click="getSign">获取Sign</el-button>
    <el-button type="primary" @click="copyResult">复制结果</el-button>
    <div style="height: 10px;"></div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <el-form label-position="left" label-width="40px" :model="form">
            <el-form-item label="user">
              <el-input v-model="form.user"></el-input>
            </el-form-item>
            <el-form-item label="token">
              <el-input v-model="form.token"></el-input>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <span v-html="jsonResult"></span>
        </el-card>
      </el-col>
    </el-row>
    <div style="height: 10px;"></div>
    <el-row>
      <el-col :span="24">
        <el-card style="line-height: 26px;">
          <p>
            1、user:用户名。
          </p>
          <p>
            2、token:token值。
          </p>
          <p>
            3、timestamp为系统自动生成。
          </p>
          <p>
            4、Sign=md5(timestamp+user+token)。
          </p>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import md5 from 'js-md5';
import {formatJson} from '../../../../main/util/formatJsonUtil';
export default {
  name: 'enumTool',
  data: function() {
    return{
      jsonResult: "",
      notFormatJson: "",
      form: {
        user: "admin",
        token: "aavqhvv6lt"
      },
      requestJson: {
        user: null,
        timestamp: null,
        sign: null,
        data: {
          field: ""
        },
        dataValues: [{
          field: ""
        }]
      }
    }
  },
  methods: {
    getSign() {
      this.requestJson.timestamp = new Date().getTime()
      this.requestJson.user = this.form.user
      this.requestJson.sign = md5(this.requestJson.timestamp + this.requestJson.user + this.form.token)
      this.notFormatJson = JSON.stringify(this.requestJson)
      this.jsonResult = formatJson(JSON.stringify(this.requestJson),(err)=>{this.$message.error(err)})
    },
    copyResult() {
      this._copy(this.notFormatJson)
    },
    _copy(context) {
      // 创建输入框元素
      let oInput = document.createElement('input');
      // 将想要复制的值
      oInput.value = context;
      // 页面底部追加输入框
      document.body.appendChild(oInput);
      // 选中输入框
      oInput.select();
      // 执行浏览器复制命令
      document.execCommand('Copy');
      // 弹出复制成功信息
      this.$message.success('复制成功');
      // 复制后移除输入框
      oInput.remove();
    }
  }
}
</script>

<style>
/* CSS */
</style>
